SVG: Scalable Vector Graphics
Scalable Vector Graphics (SVG) ist eine auf XML basierende Markup-Sprache zur Beschreibung zweidimensionaler Vektorgrafiken.
Als solches ist es ein textbasiertes, offenes Web-Standardformat zur Beschreibung von Bildern, die in jeder Größe klar dargestellt werden können und speziell dafür entwickelt wurden, gut mit anderen Web-Standards wie CSS, DOM, JavaScript und SMIL zu funktionieren. SVG ist im Wesentlichen für Grafiken, was HTML für Text ist.
SVG-Bilder und ihre zugehörigen Verhaltensweisen werden in XML-Textdateien definiert, was bedeutet, dass sie durchsucht, indexiert, geskriptet und komprimiert werden können. Darüber hinaus bedeutet das, dass sie mit jedem Texteditor oder mit Zeichenprogrammen erstellt und bearbeitet werden können.
Im Vergleich zu klassischen Bitmap-Bildformaten wie JPEG oder PNG können SVG-Format-Vektorbilder in jeder Größe ohne Qualitätsverlust gerendert werden und können leicht lokalisiert werden, indem der Text innerhalb der Bilder aktualisiert wird, ohne dass ein grafischer Editor benötigt wird. Mit geeigneten Bibliotheken können SVG-Dateien sogar dynamisch lokalisiert werden.
SVG wurde seit 1999 vom World Wide Web Consortium (W3C) entwickelt.
Tutorials
Die SVG-Tutorials sind darauf ausgelegt, Sie durch die Themen zu führen, indem sie davon ausgehen, dass Sie keine Vorkenntnisse haben, beginnend mit den Grundlagen und sich zu fortgeschritteneren Techniken entwickelnd.
- Introducing SVG from scratch
-
Dieses Tutorial zielt darauf ab, die Interna von SVG zu erklären und ist voller technischer Details. Wenn Sie nur schöne Bilder zeichnen möchten, finden Sie möglicherweise nützlichere Ressourcen auf der Inkscape-Dokumentationsseite. Eine weitere gute Einführung in SVG bietet das SVG Primer des W3C. Schauen Sie sich auch dieses adventskalenderthematische SVG-Tutorial an, das Sie durch das Codieren von 25 festlichen SVGs führt.
Leitfaden
Die SVG-Leitfäden helfen Ihnen beim Arbeiten mit SVG im Web und decken Themen ab wie Einbetten, MIME-Typen, Skripthandhabung, Animationen, Filter und mehr.
- Applying SVG effects to HTML content
-
Moderne Browser unterstützen die Verwendung von SVG innerhalb von CSS-Stilen, um grafische Effekte auf HTML-Inhalte anzuwenden.
- Content type
-
SVG verwendet eine Reihe von Datentypen. Dieser Artikel listet diese Typen zusammen mit ihrer Syntax und Beschreibungen dessen, wofür sie verwendet werden, auf.
- Namespaces crash course
-
Namensräume sind für Benutzeragenten unerlässlich, die mehrere XML-Dialekte unterstützen. Browser müssen sehr strikt sein; sich jetzt die Zeit zu nehmen, Namensräume zu verstehen, bewahrt Sie vor zukünftigen Kopfschmerzen.
- Scripting
-
Es gibt mehrere Möglichkeiten, SVG mithilfe von JavaScript zu erstellen und zu manipulieren. Dieses Dokument beschreibt die Ereignisbehandlung, Interaktivität und das Arbeiten mit eingebetteten SVG-Inhalten.
- SVG animation with SMIL
-
SMIL ist eine auf XML basierende Sprache für das Schreiben von interaktiven Multimedia-Präsentationen. Autoren können SMIL-Syntax in SVG verwenden, um das Timing und Layout von Elementen für Animationen zu definieren.
- SVG as an image
-
SVG kann als Bildformat in HTML, CSS, bestimmten SVG-Elementen und über die Canvas-API verwendet werden. Diese Seite listet die Funktionen auf, bei denen Sie SVG als Bildquelle bereitstellen können.
- SVG filters
-
SVG unterstützt Filter, sodass Autoren Effekte wie Schatten oder Weichzeichnung anwenden oder sogar die Ergebnisse verschiedener Filter kombinieren können.
- SVG in HTML introduction
-
Dieser Artikel zeigt, wie Sie eingebettetes SVG verwenden und enthält Beispiele zur Veranschaulichung.
Referenz
Die SVG-Referenz-Dokumentation enthält umfassende Informationen zu Elementen, Attributen und DOM-Schnittstellen und listet relevante Spezifikationen und Standarddokumente auf.
- SVG elements
-
Die SVG-Elemente, die zur Konstruktion, zum Zeichnen und zur Layoutgestaltung von Vektorgrafiken verwendet werden.
- SVG attributes
-
Die verfügbaren SVG-Attribute, die verwendet werden können, um zu spezifizieren, wie ein Element gehandhabt oder gerendert werden soll.
- SVG DOM interface
-
Die SVG-DOM-API zur Interaktion mit SVG unter Verwendung von JavaScript.